const template = `
	<div class="patrol-list">
		<van-nav-bar
			:title="title"
			@click-left="onBack"
			left-arrow
		/>
		<div class="patrol-list__inner">
			<ul>
				<li v-for="(item,index) in list" :key="index" class="patrol-list-item">
					<div>
						<span class="timePeriod">{{ '巡检班次【' + item.timePeriod + '】'}}</span>
					</div>
					<div class="patrol-list-item__avatar">
						<img src="./assets/plugins/vant/theme/default/img/avatar.png" />
					</div>
					<div class="patrol-list-item__inner">
						<div style="flex: 1;">
							<div class="patrol-list-item__name">{{ item.createName }}</div>
							<div class="patrol-list-item__datetime">
									<time>{{ item.createDate }}</time>
							</div>
						</div>
						<div style="width: 120px;">
							<div class="patrol-list-item__state is-ok">状态:&nbsp;<em>{{ item.state }}</em></div>
							<div class="patrol-list-item__total-time is-ok">用时:&nbsp;<time>{{ item.totalTime }}</time></div>
						</div>
					</div>
					<div>
						<ul class="patrol-list-item__room-wrapper">
							<li v-for="(room,roomIndex) in item.roomList" :key="roomIndex">
								<a @click="toRoom(room.id, room.name)" class="patrol-list-item__room" :class="{ finished: room.finished }">
									{{ room.name }}
								</a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
			
		</div>
	</div>
`;

export default {
	created() {
		axios.get(`/patrolRecordMs/getMyTaskListByDay/${this.$root.userId}/${this.$root.nickName}`)
		.then(resp => {
			let data = resp.data;
			
			if(data.length < 1) {
				this.$toast('没有巡检信息');
				return;
			}
			
			let timePeriodObj = {};
			data.forEach(v => {
				timePeriodObj.timePeriod = v.timePeriod;
				timePeriodObj.createName = v.createName;
				timePeriodObj.createDate = v.createDate;
				timePeriodObj.state = v.state === 0 ? '未完成' : '已完成';
				timePeriodObj.roomList = [];
				v.patrolUnitList.forEach(item => {
					timePeriodObj.roomList.push({
						id: item.unitId,
						name: item.unitName,
						finished: !(item.state === 0),
					});
				});
			});
			this.list.push(timePeriodObj);
			
		});
		
	},
	
	data() {
		return {
			title: '当日巡检',
			list: [],
		}
	},
	methods: {
		onBack() {
			this.$router.back();
		},
		
		toRoom(roomId, roomName) {
			this.$router.push(`/main/room/${roomId}/${roomName}`)
		},
	},
	
	template,
	
	components: {
		
	}
}